import 'package:flutter/material.dart';

void main() {
  // 1.运行应用程序
  runApp(const MaterialApp(home: Main()));
}

class Main extends StatelessWidget {
  const Main({super.key});
 
  @override
  Widget build(BuildContext context) {
    // 2.构建应用程序界面
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'CustomScrollView组件 - 自定义滚动容器',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.black,
      ),
      // 中间内容
      body: Container(
        padding: const EdgeInsets.all(10),
        color: Colors.black12,
        child:  CustomScrollView(
          slivers: [
            SliverGrid.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3, // 设置列数
                mainAxisSpacing: 10, // 主轴间距
                crossAxisSpacing: 10, // 交叉轴间距
                childAspectRatio: 1, // 宽高比
              ),
              itemCount: 6,
              itemBuilder: (BuildContext context,int index){
                return Container(
                  color: Colors.pink,
                  alignment: Alignment.center,
                  child: Text('黑马$index'),
                );
              },
               ),
               const SliverPadding(padding: EdgeInsets.only(bottom: 10),
               ),
               SliverList.separated(
                itemBuilder: (context, index) {
                  return Container(
                  color: Colors.yellow,
                  height: 100,
                  alignment: Alignment.center,
                  child: Text('黑马$index'),
                );
                },
                separatorBuilder: (context, index) {
                  return Container(
                    // Colors.transparent 无颜色设置
                  color: Colors.transparent,
                  height: 10,
                );
                },
                itemCount: 20,
               )
          ]
         
        ),
        ),
      );
  }
}
